<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="model">
    <p id="words"></p>
    <script>
        const model = document.getElementById("model");
        const words = document.getElementById("words");
        /*
            其实这里newObj这个proxy代理对象就相当于MVVM中的VM，它代理的那个{}就相当于M，我们通过对{}的代理（set时修改dom），就实现了数据改变视图改变
            我们还需要实现试图改变让数据进行改变，所以下面model.addEventListener就相当于试图改变去修改数据
        */
        // 2023.7.21复习补充理解：proxy的get与set中搭配Reflect.get\set的目的，其实就相当于proxy的get与set是一个增强的get与set函数（增加其它逻辑），get与set本身的行为通过Reflect去触发
        const newObj = new Proxy({}, {
            /*
                Proxy配置对象的get方法：
                    target：porxy实例代理的那个对象
                    key：对象的属性名
                    receiver：proxy对象实例本身
                set方法第三个参数value是设置的新值；然后第四个参数才是receiver
            */
            get(target, key, receiver) {
                return Reflect.get(target, key, receiver);
            },
            set(target, key, value, receiver) {
                if(key === 'key') {
                    model.value = value;
                    words.innerHTML = value;
                }
                return Reflect.set(target, key, value, receiver);
            }
        })
        model.addEventListener('keyup', (e) => {
            newObj.key = e.target.value;
        })
    </script>
</body>
</html>